<template>
    <!-- components/diy/integralGoods/integralGoods.wxml -->
    <!-- 能量商品 -->
    <view class="m-decorate-item" v-if="0 < dataList.length">
        <view class="goods-list m-integral-goods-list">
            <view :class="'goods type--' + itemStyle.column + ' f-clearfix'" @tap="navigationTo" :data-url="item.url" v-for="(item, index) in dataList" :key="item.id">
                <image class="img" :src="item.item_img" mode="aspectFill" lazy-load></image>

                <view class="info">
                    <view class="title onelist-hidden" v-if="itemStyle.show.goodTitle">{{ item.item_title }}</view>
                    <view class="m-decorate-good-active-time col-9" v-if="itemStyle.show.activeTime">{{ item.active_word }}</view>
                    <block v-else>
                        <!-- 不是大图 -->
                        <view class="m-decorate-good-active-time col-9" v-if="itemStyle.column !== '1'"></view>
                    </block>
                    <view class="extra">
                        <text class="price" :style="'color: ' + style.color1 + ';'" v-if="itemStyle.show.goodPrice">
                            {{ item.score }}
                            <text class="m-decorate-good-integral-unit">能量</text>
                        </text>
                    </view>
                    <view
                        class="cart--3 m-decorate-integral-goods-cart"
                        :style="'background: ' + style.color1 + '; color: ' + style.color2 + ';'"
                        v-if="itemStyle.column == '1' || itemStyle.column == '4'"
                    >
                        马上兑换
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
// components/diy/integralGoods/integralGoods.js
const app = getApp();
export default {
    data() {
        return {};
    },
    /**
     * 组件的属性列表
     */
    props: {
        itemStyle: Object,
        dataList: Array,
        style: {
            type: Object,
            default: () => ({
                color1: '#ff495e',
                color2: '#ffffff'
            })
        }
    },
    /**
     * 组件的方法列表
     */
    methods: {
        /**
         * 跳转到指定页面
         */
        navigationTo: function (e) {
            app.navigationTo(e.currentTarget.dataset.url);
        }
    }
};
</script>
<style lang="scss">
@import '../../../utils/common.scss'; /* components/diy/integralGoods/integralGoods.wxss */

.goods-list {
    overflow: hidden;
}

.goods {
    background: #fff;
    float: left;
    box-sizing: border-box;
    margin-bottom: 10rpx;
    padding: 10rpx;
    position: relative;
    overflow: hidden;
}

/* 双图 */
.goods.type--2 {
    width: 370rpx;
    min-height: 540rpx;
}

.goods.type--2:nth-child(2n) {
    margin-left: 10rpx;
}
/* 大图 */
.goods.type--1 {
    width: 100%;
}
/* 详情 */
.goods.type--4 {
    width: 100%;
    height: 300rpx;
    overflow: hidden;
}

.goods.type--2 .img {
    width: 100%;
    height: 336rpx;
}

.goods.type--1 .img {
    width: 100%;
    max-height: 750rpx;
}

.goods.type--4 .img {
    width: 300rpx;
    height: 300rpx;
    position: absolute;
}

.goods .title {
    /* color: #2c2c2c; */
    font-size: 28rpx;
    font-weight: 400;
}

.goods .info {
    margin-top: 30rpx;
    padding: 0 15rpx;
    position: relative;
}

.goods.type--4 .info {
    height: 100%;
    margin-left: 340rpx;
    overflow: hidden;
    margin-top: 10rpx;
    position: relative;
}

.goods .sales-num {
    color: #2c2c2c;
    font-size: 28rpx;
    margin-top: 10rpx;
    font-weight: 400;
}

.goods .price {
    font-size: 32rpx;
    font-weight: 500;
    float: left;
}

.goods .extra {
    overflow: hidden;
    text-align: center;
    margin-top: 20rpx;
}

.goods.type--4 .extra {
    width: 100%;
    position: absolute;
    bottom: 30rpx;
}

.goods .cart {
    font-size: 50rpx;
}

.goods.type--4 .cart {
    position: absolute;
    right: 10rpx;
    bottom: 30rpx;
}

.goods.type--1 .cart {
    position: absolute;
    right: 10rpx;
    bottom: 0rpx;
}

.goods.type--2 .cart {
    position: absolute;
    right: 10rpx;
    bottom: 0rpx;
}

.goods .cart--3 {
    height: 64rpx;
    line-height: 64rpx;
    border-radius: 3rpx;
}

.goods.type--4 .cart--3 {
    width: 200rpx;
    text-align: center;
    position: absolute;
    right: 10rpx;
    bottom: 20rpx;
}

.goods.type--1 .cart--3 {
    width: 200rpx;
    text-align: center;
    position: absolute;
    right: 10rpx;
    bottom: 0rpx;
}

.goods.type--2 .cart--3 {
    text-align: center;
    margin-top: 10rpx;
}

.m-integral-goods-list .m-decorate-good-integral {
    font-size: 37rpx;
}

.m-integral-goods-list .m-decorate-good-integral-unit {
    font-size: 27rpx;
    margin-left: 1px;
    font-weight: normal;
}

.m-integral-goods-list .m-decorate-good-active-time {
    /* color: #908f8f; */
    font-size: 27rpx;
    margin-top: 20rpx;
    font-weight: 400;
    line-height: 34rpx;
}

.m-integral-goods-list .m-decorate-integral-goods-cart {
    border-radius: 25rpx;
}

.m-integral-goods-list .m-decorate-integral-goods-cart {
    width: 138rpx;
    height: 46rpx;
    line-height: 46rpx;
    font-size: 24rpx;
    border-radius: 23rpx;
}

.m-integral-goods-list .m-decorate-integral-goods-cart {
    width: 175rpx;
    height: 60rpx;
    line-height: 60rpx;
    font-size: 24rpx;
    border-radius: 30rpx;
}

.m-integral-goods-list .goods.type--3 {
    width: 32%;
    float: left;
    margin-left: 1%;
    padding: 10rpx;
}

.m-integral-goods-list .type--3 image {
    width: 100%;
    height: 240rpx;
}
</style>
